<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
<comment-box @reloadComment="loadComments"></comment-box>
<ul class="list-group">
    <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">{{item.name}}</span>
        {{item.content}}
    </li>
</ul>


    </div>
<template id="tmp1">
    <div>
        <div class="form-group">
            <label>name:</label>
            <input type="text" class="form-control" v-model="name">
        </div>
        <div class="form-group">
            <label>content:</label>
            <textarea class="form-control" v-model="content"></textarea>
        </div>
        <div class="form-group">
            <input type="button" value="submit" class="btn btn-primary" @click="postComment">
        </div>
    </div>
</template>

    <script>
var commentBox={
    template:"#tmp1",
    data:()=>{
        return {
            name:"",
            content:""
        }
    },
    methods:{
        postComment(){
            var comment={id:Date.now(),name:this.name,content:this.content},
            list=JSON.parse(localStorage.getItem("cmts")||"[]");
            list.unshift(comment);
            localStorage.setItem("cmts",JSON.stringify(list));
            this.name=this.content="";
            this.$emit("reloadComment");
        }
    }
}

        var vm = new Vue({
            el: "#app",
            data: {
                list:[
                    {id:Date.now(),name:"libai",content:"libai say "},
                    {id:Date.now(),name:"jiangxiaobai",content:"jiangxiaobai say "},
                    {id:Date.now(),name:"xiaoma",content:"xiaoma say "}
                ]
            },
            methods: {
                loadComments(){
                    this.list=JSON.parse(localStorage.getItem("cmts")||"[]");
                }
            },
            components:{
                commentBox
            },
            created(){
                this.loadComments();
            }
        })
    </script>
</body>

</html>